<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>{:C('webname')}</title>

<style type="text/css">
*{
	margin: 0;
	padding: 0;
}
body{
	font-family: "微软雅黑";
	font-size: 14px;
	background: url({$tplpath}/Asset/images/loginbg.jpg) fixed center center;
}
.logo_box{
	width: 400px;
	height: 300px;
	padding:0px;
	color: #EEE;
	border-radius: 4px;
}
.logo_title{
	padding-top: 37px;
	padding-left: 50px;
}
.logo_box h3{
	text-align: center;
	height: 20px;
	font: 20px "microsoft yahei",Helvetica,Tahoma,Arial,"Microsoft jhengHei",sans-serif;
	color: #FFFFFF;
	height: 20px;
	line-height: 20px;
	padding:0 0 35px 0;
}
#login_form{	
	padding:20px 40px;
}
.forms{	
	height: 300px;
}
.logon_inof{
	width: 100%;
	min-height: 300px;
	padding-top: 35px;
	position: relative;
}		
.input_outer{
	height: 46px;
	padding: 0 5px;
	margin-bottom: 20px;
	border-radius: 50px;
	position: relative;
	background: rgba(255,255,255,.85);
	border: rgba(0,0,0,0.2) 1px solid !important;
}
.u_user{
	width: 25px;
	height: 25px;
	background: url({$tplpath}/Asset/images/login_ico.png);
	background-position:  -125px 0;
	position: absolute;
	margin: 12px 13px;
}
.us_uer{
	width: 25px;
	height: 25px;
	background-image: url({$tplpath}/Asset/images/login_ico.png);
	background-position: -125px -34px;
	position: absolute;
	margin: 12px 13px;
}
.l-login{
	position: absolute;
	z-index: 1;
	left: 50px;
	top: 0;
	height: 46px;
	font: 14px "microsoft yahei",Helvetica,Tahoma,Arial,"Microsoft jhengHei";
	line-height: 46px;
}
label{
	color: rgb(255, 255, 255);
	display: block;
}
.text{
	width: 220px;
	height: 46px;
	outline: none;
	display: inline-block;
	font: 14px "microsoft yahei",Helvetica,Tahoma,Arial,"Microsoft jhengHei";
	margin-left: 50px;
	border: none;
	background: none;
	line-height: 46px;
}
/*///*/
.mb2{
	margin-bottom: 20px
}
.mb2 a{
	text-decoration: none;
	outline: none;
}
.submit {
	padding: 15px;
	margin-top: 20px;
	display: block;
}
.act-but{
	height: 20px;
	line-height: 20px;
	text-align: center;
	font-size: 20px;
	border-radius: 50px;
	background: #5ab2fc;
}
/*////*/
.check{
	width: 280px;
	height: 22px;
}
.clearfix::before{
	content: "";
	display: table;
}
.clearfix::after{
	display: block;
	clear: both;
	content: "";
	visibility: hidden;
	height: 0;
}
.login-rm{
	float: left;
}
.login-fgetpwd {
	float: right;
}
.check{
	width: 18px;
	height: 18px;
	background: #fff;
	border: 1px solid #e5e6e7;
	margin: 0 5px 0 0;
	border-radius: 2px;
}
.check-ok{
	background-position: -128px -70px;
	width: 18px;
	height: 18px;
	display: inline-block;
	border: 1px solid #e5e6e7;
	margin: 0 5px 0 0;
	border-radius: 2px;
	vertical-align: middle
}
.checkbox{
	vertical-align: middle;
	margin: 0 5px 0 0;
}

/*=====*/
/*其他登录口*/
.logins{
width: 280px;
height: 27px;
line-height: 27px;
float:left;
padding-bottom: 30px;
}
.qq{
	width: 27px;
	height: 27px;
	float: left;
	display: inline-block;
	text-align: center;
	margin-left: 5px;
	margin-right: 18px;
}
.wx{
	width: 27px;
	height: 27px;
	text-align: center;
	line-height: 27px;
	display: inline-block;
	margin: 5px 18px auto 5px;
}
.wx img{
	width: 16px;
	height: 16px;
	float: left;
	line-height: 27px;
	text-align: center;
}
/*////*/
.sas{
	width: 280px;
	height: 18px;
	float: left;
	color: #FFFFFF;
	text-align: center;
	font-size: 16px;
	line-height: 16px;
	margin-bottom: 50px;
}
.sas a{
	width: 280px;
	height: 18px;
	color: #FFFFFF;
	text-align: center;
	line-height: 18px;
	text-decoration: none;
}

/* 视频背景 */
.fullscreenvideo {
	position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    -webkit-transition: 1s opacity;
    transition: 1s opacity;
}

.videocontainer{
    position: fixed;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -100;	
}

.videocontainer:before{
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    z-index: -1;
    top: 0;
    left: 0;
    background: rgba(255,255,255,.55);
}

.add-loginBox{
	width: 800px;
	height: 300px;
	margin: 0 auto;
	margin-top: 100px;
	background: rgba(255,255,255,.80);
	position: absolute;
	left: 50%;
	top:100px;
	margin-left: -400px;
	border-radius: 8px;
}
.add-leftBox{
	width: 400px;
	height: 300px;
	float: left;
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
	background: rgba(90,177,253,.80);
}
.login-address{
	width: 204px;
	height: 38px;
	padding-top: 120px;
	padding-left: 90px;
}
.add-rightBox{
	width: 400px;
	height: 300px;
	float: right;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
}
</style>
</head>
<body>

<script src="__PUBLIC__/js/jquery-2.1.4.min.js" type="text/javascript"></script>
<div class="videocontainer">
	<!-- <video class="fullscreenvideo" poster="__ROOT__/Themes/tdt/Asset/images/loginbg.jpg" id="bgvid" playsinline="" autoplay="" muted="" loop="">
		<source src="__PUBLIC__/video/loginbg.mp4" type="video/mp4">
	</video> -->
	<img src="__ROOT__/Themes/tdt/Asset/images/loginbg.jpg">
</div>
<div class="add-loginBox">
	<div class="add-leftBox">
		<div class="login-address">
			<img src="__ROOT__/Themes/tdt/Asset/images/common/loginAddress.png">
		</div>
	</div>
	<div class="add-rightBox">
		<div class="logo_box">
			<div class="logo_title"><img src="__ROOT__/Themes/tdt/Asset/images/common/loginTitle.png"></div>
			<form action="{:U('login')}" id="login_form" method="post">
				<div class="input_outer">
					<span class="u_user"></span>
					<input name="username" class="text" placeholder="输入用户名登录" value="" type="text">
				</div>
				<div class="input_outer">
					<span class="us_uer"></span>
					<input name="password" class="text" placeholder="输入密码" style="position:absolute; z-index:100;"  value="" type="password">
				</div>
				<div class="mb2">
					<a class="act-but submit" href="#" style="color: #FFFFFF">登录</a>
					<button type="submit" class="sub_btn" style="display: none;"></button>
				</div>
			</form>
		</div>
	</div>
</div>
<script type="text/javascript">
	$().ready(function(){
		$('.submit').on('click', function(){
			$('#login_form').submit();
		});
	});

	var video= document.getElementById('bgvid');
</script>
</body>
</html>